<div class="mission-container" admin-mission-data>
	<div class="am-cf am-padding">
	      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">Mission</strong> / <small>Data</small></div>
	    </div>

	    <div class="am-g">
	      <div class="am-u-sm-12 am-u-md-6">
	        <div class="am-btn-toolbar">
	          <div class="am-btn-group am-btn-group-xs">
	            <button type="button" class="am-btn am-btn-default" data-am-modal="{target: '#add-mission-modal', closeViaDimmer: 0}"><span class="am-icon-plus"></span> Add</button>
	            <button type="button" class="am-btn am-btn-default" admin-edit-mission><span class="am-icon-edit"></span> Edit</button>
	            <button type="button" class="am-btn am-btn-default" admin-delete-mission><span class="am-icon-trash-o"></span> Delete</button>
	          </div>
	        </div>
	      </div>
	      <div class="am-u-sm-6 am-u-md-2">
	        <div class="am-form-group mission-page-list">
	          <select data-am-selected="{btnSize: 'sm'}">
	            <option value="10">10</option>
	            <option value="20">20</option>
	            <option value="50">50</option>
	            <option value="All">All</option>
	          </select>
	        </div>
	      </div>
	      <div class="am-u-sm-12 am-u-md-3">
	        <div class="am-input-group am-input-group-sm mission-filter">
	          <input type="text" class="am-form-field search-mission" ng-model="search" ng-keyup="searchMissions($event)">
	          <span class="am-input-group-btn">
	            <button class="am-btn am-btn-default" type="button">Search</button>
	          </span>
	        </div>
	      </div>
	    </div>

	    <div class="am-g">
	      <div class="am-u-sm-12">
	          <table class="am-table am-table-striped am-table-hover table-main" id="misson-table">
	            <thead>
	              <tr>
	                <th class="table-check"><input type="checkbox" class="select-all-mission"/></th>
	                <th class="table-id">ID</th>
	                <th class="table-title">Name</th>
	                <th class="table-set">Operation</th>
	              </tr>
	          </thead>
	          <tbody>
	            <tr ng-repeat="mission in missions.result">
	              <td class="select-column"><input type="checkbox" name="select-single-mission" class="select-single-record" /></td>
	              <td class="missionId">{{mission.missionId}}</td>
	              <td class="missionName am-text">{{mission.name}}</td>
	              <td>
	                <div class="am-btn-toolbar">
	                  <div class="am-btn-group am-btn-group-xs">
	                    <button data-missionId="{{mission.missionId}}" class="am-btn am-btn-default am-btn-xs am-text-secondary" data-am-modal="{target: '#quests-modal', width: 600, height: 600}" admin-mission-quests><span class="am-icon-pencil-square-o"></span> View Quests</button>
	                  </div>
	                </div>
	              </td>
	            </tr> 
	           
	          </tbody>
	        </table>
	          <div class="am-cf">
	          	Total <span class="mission-total-record">0</span> records
			  <div class="am-fr">
			    <ul class="am-pagination mission-pager-container">
			    </ul>
			  </div>
		    </div>
		 <hr />
	     <p>Attention</p>
	   </div>
	</div>
</div>

<!--    add mission modal   -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="add-mission-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Add Mission
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd ">
       <form class="am-form" id="add-mission-form" data-am-validator>
		  <fieldset>
		    <div class="am-form-group">
		      <label for="doc-vld-name-2">Mission Name：</label>
		      <input type="text" name="missionName" id="doc-vld-name-2" minlength="3" placeholder="Name" ng-model="missionName" required/>
		    </div>
		    <button class="am-btn am-btn-secondary" data-oper="add" data-id="0" admin-operate-mission>Add</button>
		  </fieldset>
		</form>
    </div>
  </div>
</div>

<!--    edit mission modal   -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="edit-mission-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Edit Mission
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
       <form class="am-form" id="edit-mission-form" data-am-validator>
		  <fieldset>
		    <div class="am-form-group">
		      <label for="doc-vld-name-2">Mission Name：</label>
		      <input type="text" name="missionName" id="doc-vld-name-2" minlength="3" placeholder="Name" required/>
		    </div>
		    <button class="am-btn am-btn-secondary" data-oper="edit" admin-operate-mission>Update</button>
		  </fieldset>
		</form>
    </div>
  </div>
</div>

<!--    delete mission modal   -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="delete-mission-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Delete Confirm</div>
    <div class="am-modal-bd">
      Are you sure to delete the record?
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>Cancel</span>
      <span class="am-modal-btn delete-mission-btn" data-oper="del" data-am-modal-confirm admin-operate-mission>Delete</span>
    </div>
  </div>
</div>

<!--    validate mission modal   -->
<div class="am-modal am-modal-alert" tabindex="-1" id="mission-warning">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Warning</div>
    <div class="am-modal-bd">
      Please select a record to operate.
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">Close</span>
    </div>
  </div>
</div>

<!--    mission quests modal   -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="quests-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Mission/Quests
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-u-sm-12 am-u-md-6">
	  <div class="am-btn-toolbar">
	    <div class="am-btn-group am-btn-group-xs">
	      <button type="button" class="am-btn am-btn-default" data-am-modal="{target: '#add-quest-modal', closeViaDimmer: 0}" admin-add-quest><span class="am-icon-plus"></span> Add</button>
	      <button type="button" class="am-btn am-btn-default" admin-edit-quest><span class="am-icon-edit"></span> Edit</button>
	      <button type="button" class="am-btn am-btn-default" admin-delete-quest><span class="am-icon-trash-o"></span> Delete</button>
	    </div>
	  </div>
	</div>
    <div class="am-modal-bd">
      <table class="am-table am-table-striped am-table-hover table-main" id="quest-table">
	    <thead>
	      <tr>
	        <th class="table-check"><input type="checkbox" class="select-all-mission"/></th>
	        <th class="table-id">ID</th>
	        <th class="table-title">Name</th>
	        <th class="table-description">Desciprion</th>
	      </tr>
	    </thead>
	    <tbody>
	      <tr ng-repeat="quest in quests.result">
	        <td class="select-column"><input type="checkbox" name="select-single-quest" class="select-single-record" ng-click="selectSingleRecord($event)"/></td>
	        <td class="questId">{{quest.questId}}</td>
	        <td class="questName am-text">{{quest.name}}</td>
	        <td class="questDescription am-text">{{quest.description}}</td>
	      </tr> 
	    </tbody>
	  </table>
	  <div class="am-cf">
	    Total <span class="mission-total-record">{{quests.totalCount}}</span> records
		<div class="am-fr">
		  <ul class="am-pagination quest-pager-container">
	      </ul>
	    </div>
	  </div>
    </div>
  </div>
</div>


<!--    add quest modal   -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="add-quest-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Add Quest
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd ">
       <form class="am-form" id="add-quest-form" data-am-validator>
		  <fieldset>
		    <div class="am-form-group">
		      <label for="questName">Name：</label>
		      <input type="text" name="questName" id="questName" minlength="3" placeholder="Name" ng-model="quest.name" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="questDescription">Description</label>
		      <input type="text" name="questDescription" id="questDescription" minlength="3" placeholder="Description" ng-model="quest.description" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="questObjects">Objects</label>
		      <input type="text" name="questObjects" id="questObjects" minlength="3" placeholder="Objects" ng-model="quest.objects" required/>
		    </div>

		    <div class="am-form-group">
	          <select ng-model="quest.missionType" class="quest-type-select">
	            <option ng-repeat="type in questTypes" value="{{type.typeId}}">{{type.name}}</option>
	          </select>
	        </div>

		    <button class="am-btn am-btn-secondary" data-oper="add" data-id="0" admin-operate-quest>Add</button>
		  </fieldset>
		</form>
    </div>
  </div>
</div>

<!--    edit quest modal   -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="edit-quest-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Edit Quest
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd ">
       <form class="am-form" id="add-quest-form" data-am-validator>
		  <fieldset>
		    <div class="am-form-group">
		      <label for="questName">Name：</label>
		      <input type="text" name="questName" id="questName" minlength="3" placeholder="Name" ng-model="quest.name" value="{{quest.name}}" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="questDescription">Description</label>
		      <input type="text" name="questDescription" id="questDescription" minlength="3" placeholder="Description" ng-model="quest.description" value="{{quest.description}}" required/>
		    </div>

		    <div class="am-form-group">
		      <label for="questObjects">Objects</label>
		      <input type="text" name="questObjects" id="questObjects" minlength="3" placeholder="Objects" ng-model="quest.objects" value="{{quest.objects}}" required/>
		    </div>

		    <div class="am-form-group">
	          <select ng-model="quest.missionType" class="quest-type-select">
	            <option ng-repeat="type in questTypes" value="{{type.typeId}}">{{type.name}}</option>
	          </select>
	        </div>

		    <button class="am-btn am-btn-secondary" data-oper="edit" data-id="0" admin-operate-quest>Update</button>
		  </fieldset>
		</form>
    </div>
  </div>
</div>

<!--    delete quest modal   -->
<div class="am-modal am-modal-confirm" tabindex="-1" id="delete-quest-modal">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Delete Confirm</div>
    <div class="am-modal-bd">
      Are you sure to delete the record?
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>Cancel</span>
      <span class="am-modal-btn delete-mission-btn" data-oper="del" data-am-modal-confirm admin-operate-quest>Delete</span>
    </div>
  </div>
</div>

<!--    validate quest modal   -->
<div class="am-modal am-modal-alert" tabindex="-1" id="quest-warning">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Warning</div>
    <div class="am-modal-bd">
      Please select a record to operate.
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn close-warning">Close</span>
    </div>
  </div>
</div>

